<template>
  <div class="sec-top">
    <a href="#/" class="btn btn-sm btn-primary">返回闪屏任务列表</a>
  </div>
  <div class="form form-horizontal">
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">*任务名</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" v-model="ad.name">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">*开始时间</label>
      <div class="col-sm-9">
        <vue-date-picker
          :time.sync="ad.startTime"
          :option='datePickerOption'>
        </vue-date-picker>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">*结束时间</label>
      <div class="col-sm-9">
        <vue-date-picker
          :time.sync="ad.endTime"
          :option='datePickerOption'>
        </vue-date-picker>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">*平台</label>
      <div class="col-sm-9">
        <select class="form-control" v-model="ad.deviceType">
          <option value="1">金贝塔iOS</option>
          <option value="2">金贝塔Android</option>
          <option value="3">港股iOS</option>
          <option value="4">港股Android</option>
        </select>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">*闪屏时长(秒)</label>
      <div class="col-sm-9">
        <input type="number" class="form-control duration" v-model="ad.waitTime">
      </div>
    </div>
    <div class="form-group form-group-sm" v-if="+ad.deviceType === 2 || +ad.deviceType === 4">
      <label class="control-label col-sm-2">渠道地址</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" v-model="ad.channel">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">*闪屏图</label>
      <div class="col-sm-3">
        <div class="group">
          <label class="control-label">建议尺寸 高：2208px 宽：1242px</label>
        </div>
      </div>
      <div class="col-sm-3" v-if="+ad.deviceType === 2 || +ad.deviceType === 4">
        <div class="group">
          <label class="control-label">建议尺寸 高：1920px 宽：1080px</label>
        </div>
      </div>
      <div class="col-sm-3" v-if="+ad.deviceType === 2 || +ad.deviceType === 4">
        <div class="group">
          <label class="control-label">建议尺寸 高：1280px 宽：720px</label>
        </div>
      </div>
    </div>
    <template v-for="screen in ad.screens">
      <div class="pic-group">
        <span class="delete" v-if="screen.canDelete" @click="deleteScreen($index)">删除</span>
        <div class="form-group form-group-sm">
          <label class="control-label col-sm-2 order">闪屏 {{$index+1}}</label>
          <div class="col-sm-3">
            <input type="file" class="form-control" id="file{{$index}}_0" accept="image/jpeg,image/png">
          </div>
          <div class="col-sm-3" v-if="+ad.deviceType === 2 || +ad.deviceType === 4">
            <input type="file" class="form-control" id="file{{$index}}_1" accept="image/jpeg,image/png">
          </div>
          <div class="col-sm-3" v-if="+ad.deviceType === 2 || +ad.deviceType === 4">
            <input type="file" class="form-control" id="file{{$index}}_2" accept="image/jpeg,image/png">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="control-label col-sm-2">名称</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" v-model="screen.title">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="control-label col-sm-2">跳转内容类型</label>
          <div class="col-sm-9">
            <select class="form-control" v-model="screen.type">
              <option value="-1">请选择</option>
              <option value="1">CMS文章</option>
              <option value="2">第三方网址</option>
              <option value="3">金贝塔</option>
              <option value="4">用户</option>
              <option value="7">话题</option>
              <option value="8">动态</option>
              <option value="9">股市直播</option>
              <option value="10">迷你组合</option>
              <option value="11">存股宝</option>
              <option value="12">文章栏目</option>
            </select>
          </div>
        </div>
        <div class="form-group form-group-sm" v-if=" +screen.type !== -1 && +screen.type !== 9">
          <label class="col-sm-2 control-label">{{screen.type | adTypeTargetCase}}</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="screen.location">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-2 control-label">外部浏览器打开</label>
          <div class="col-sm-9 text-left">
            <select class="form-control" v-model="screen.forceexternalbrowser">
              <option value="0" selected>否</option>
              <option value="1">是</option>
            </select>
          </div>
        </div>
      </div>
    </template>
    <div class="form-group">
      <div class="col-sm-9 col-sm-offset-2">
        <button class="btn btn-default btn-sm" @click="addScreen">+ 闪屏</button>
        <button class="btn btn-primary btn-sm" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>
<style src="./flash-ad-new.css" scoped></style>
<script src="./flash-ad-new.js"></script>
